<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h1 style="text-align: center;">千锋教育南京校区HTML5大前端学员情况统计表</h1>
    <table border="1" cellspacing="0" cellpadding="10" style="margin:0 auto;">
        <thead>
            <tr>
                <th>序号</th>
                <th>学生ID</th>
                <th>学生姓名</th>
                <th>学生年龄</th>
                <th>学生性别</th>
                <th>学生班级</th>
                <th>学生成绩</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <div class="page" style="margin-top: 20px;"></div>

    <script src="./Data.js"></script>
    <script src="./Page.js"></script>

    <script>
        let page = new Page('.page' , {
            pageTag: {
                first:'首页',
                prev:'上一页',
                list:null,
                next:'下一页',
                last:'末页'
            },
            pageInfo: {
                pageNum:1,                // 当前页数
                pageSize:60,              // 每页显示条数
                totalData:960,           // 总条数
                totalPage:100             // 总页数 = 向上取整(总条数/每页显示条数)
            },

            /*
            callBack：回调函数：也就是回头调用的函数，即你传递函数，等需求时间到了就自动调用
            本来的写法：
            callBack:function(){

            }
            但是通过ES6对象简写语法，可以去掉冒号和function，所以可以写成
            callBack(){
                
            }
            */
            callback(pageNum) {
                console.log('回调函数当前页', pageNum);
                let pageSize = 60                             // 每页显示的条数
                let startNum = ( pageNum - 1 ) * pageSize     // 起始位置
                let overNum = startNum + pageSize             // 结束位置
                let addContent = ''
                for(let i = startNum ; i < overNum ; i++){
                    addContent += 
                    `
                        <tr>
                            <td>${tableDataArr[i].orderNumber}</td>
                            <td>${tableDataArr[i].id}</td>
                            <td>${tableDataArr[i].name}</td>
                            <td>${tableDataArr[i].age}</td>
                            <td>${tableDataArr[i].sex}</td>
                            <td>${tableDataArr[i].class}</td>
                            <td>${tableDataArr[i].score}</td>
                        </tr>
                    `
                }
                // 拼接数据最后覆盖
                document.querySelector('tbody').innerHTML = addContent
                document.querySelector('tbody').style.textAlign = 'center'
            }
        })
    </script>

</body>
</html>